<template>
  <div class="ebook">
    <!-- head -->
    <qy-navigations
    btnType="list"
    :tabFunList='tabBtnList'
    ></qy-navigations>
    <!-- content -->
    <div class="content" >
      <div class="read" id="read"></div>
      <!-- 翻页 -->
      <div class="mask-left" @click="prevPage" ><i class="el-icon-arrow-left" ></i> </div>
      <div class="mask-right"  @click="nextPage" ><i class="el-icon-arrow-right" ></i> </div>
    </div>
    <!-- 目录 -->
    <div>
      <el-drawer
      v-model="drawer"
      direction="ltr">
      <div class="toc-box kl-line-slide" >
        <div class="toc-item" v-for="(item,index) in toc" :key="index" @click="linkToc(item.href)" >{{item.label}}</div>
      </div>
    </el-drawer>
    </div>
  </div>
</template>

<script>
import Epub from 'epubjs'
global.ePub = Epub

export default{
    name:'ebook',
    data(){
        return{
          /* 导航配置 */
          //导航列表
          tabMsgList:[
            {name:'书架',path:'/works/book/book'},
          ],
          //按钮列表
          tabBtnList:[
            {name:'目录',type:'func',func:'cataLog',path:''}
          ],
          /* 数据 */
          book: null,
          drawer: false,//目录是否打开
          toc:[]//目录数据
        }
    },
    methods: {
      //获取书籍初始化信息
      init(){
        //获取书籍
        let bookPath = 'https://img1.yunser.com/epub/test.epub'
        bookPath = decodeURI(this.$route.query.src)  
        //渲染书籍
        this.showEpub(bookPath)
      },
      // 电子书解析和渲染
      showEpub (bookPath) {
        // 生成Ebook
        this.book = new Epub(bookPath)
        // 生成Rendition,通过Book.renderTo方法生成
        this.rendition = this.book.renderTo('read', {
          width:'70vw',
          height: '85vh'
        })
        // 通过Rendition.display渲染电子书
        this.rendition.display()
      },
      //上一页
      prevPage () {
      if (this.rendition) {
        this.rendition.prev()
      }
      },
      //下一页
      nextPage () {
        if (this.rendition) {
          this.rendition.next()
        }
      },
      //打开目录
      cataLog(){
        this.drawer = true
        this.gotoCfi()
      },
      //获取目录数据
      gotoCfi(cfi) {
        this.book.ready.then(() => {
            this.toc = this.book.navigation.toc;
            //console.log('目录对象',this.book.navigation);
            //执行分页
            return this.book.locations.generate(750 * (window.innerWidth / 375));
        }).then(result => {
            //console.log(result);
            //获取locations对象
            //this.locations = this.book.locations;
            //console.log('location对象',this.locations);
        })
      },
      //前往指定目录
      linkToc(href){
        this.rendition.display(href);
      }
    },
    mounted () {
       this.init()
    }
}
</script>
<style scoped lang="scss">
.content{
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 70vw;
  margin-left: 15vw;
  background-color: white;
  border: 5px solid #333;
  .read{
    background: rgba(204, 255, 204, 0.2);
  }
  .mask-left{
    position: absolute;
    left:10vw;
    top:50vh;
    font-size:50px;
    color: #999;
  }
  .mask-right{
    position: absolute;
    right:10vw;
    top:50vh;
    font-size:50px;
    color: #999;
  }
  .mask-left:hover{
    color: #666;
  }
  .mask-right:hover{
    color: #666;
  }
}
//目录样式
.toc-box{
  display: flex;
  flex-direction: column;
  height: 90vh;
}
.toc-item{
  padding:15px 0 15px 40px ;
  text-align: left;
  cursor: pointer;
}
.toc-item:hover{
 background-color: #b3d8ff;
 color: white;
}
</style>